<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>丑团外卖</title>
		<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/container.css" />
		<link rel="stylesheet" href="./css/footer.css" />
		<link rel="stylesheet" href="./css/add-to-car.css" />
	</head>
	<body>
		<!-- http://192.168.0.14:8848/vue-edu/teacher/003-%E7%9F%A5%E8%AF%86%E5%9B%9E%E9%A1%BE-%E8%B4%AD%E7%89%A9%E8%BD%A6%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C/index.html -->
		<div class="container">
			<!-- 左边 -->
			<div class="menu">
				<div class="menu-item active"><span></span></div>
				<div class="menu-item"><span>热销</span></div>
				<div class="menu-item"><span>折扣</span></div>
				<div class="menu-item"><span>夏日冰咖必喝榜</span></div>
				<div class="menu-item"><span>进店必喝</span></div>
				<div class="menu-item"><span>只喝美式</span></div>
				<div class="menu-item"><span>酷爽特调水果冰萃</span></div>
				<div class="menu-item"><span>经典奶咖</span></div>
				<div class="menu-item"><span>创意奶咖</span></div>
				<div class="menu-item"><span>瑞纳冰季</span></div>
				<div class="menu-item"><span>不喝咖啡</span></div>
				<div class="menu-item"><span>轻食甜品</span></div>
				<div class="menu-item"><span>热卖套餐</span></div>
			</div>
			
			<!-- 右边 -->
			<div class="goods-list">
				<!-- <div class="goods-item">
					<img src="./assets/g1.png" alt="" class="goods-pic" />
					<div class="goods-info">
						<h2 class="goods-title">椰云拿铁</h2>
						<p class="goods-desc">
							1人份【年度重磅，一口吞云】 √原创椰云topping，绵密轻盈到飞起！
							原创瑞幸椰云™工艺，使用椰浆代替常规奶盖
							打造丰盈、绵密，如云朵般细腻奶沫体验 椰香清甜饱满，一口滑入口腔
							【饮用建议】请注意不要用吸管，不要搅拌哦~
						</p>
						<p class="goods-sell">
							<span>月售 200</span>
							<span>好评率95%</span>
						</p>
						<div class="goods-confirm">
							<p class="goods-price">
								<span class="goods-price-unit">￥</span>
								<span>32</span>
							</p>
							<div class="goods-btns">
								<i class="iconfont i-jianhao"></i>
								<span>0</span>
								<i class="iconfont i-jiajianzujianjiahao"></i>
							</div>
						</div>
					</div>
				</div> -->
				
			</div>
		</div>

		<!-- 底端界面 -->
		<div class="footer">
			<div class="footer-car-container">
				<div class="footer-car">
					<i class="iconfont i-gouwuchefill"></i>
					<span class="footer-car-badge">0</span>
				</div>
				<div class="footer-car-price">
					<span class="footer-car-unit">￥</span>
					<span class="footer-car-total">0.00</span>
				</div>
				<div class="footer-car-tip">配送费￥0</div>
			</div>
			<div class="footer-pay">
				<a href="" class="settlement">去结算</a>
				<span class="beginSend">还差￥0元起送</span>
			</div>
		</div>

		<script src="./js/data.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>